<template>
  <div class="list">
    <topNav><slot>商品分类</slot> </topNav>
    <div class="listnav">
      <div class="left">
        <div
          :class="item.maitKey == activeid ? 'active' : ''"
          v-for="item in titleList"
          :key="item.maitKey"
          @click="headerTitle(item.maitKey)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="right">
        <router-view />
      </div>
    </div>

    <!-- 底 -->
    <buttonNav></buttonNav>
  </div>
</template>

<script>
import { queryTitle} from "@/plugins/api/index";
import ButtonNav from "../components/buttonNav.vue";
import topNav from "../components/topNav.vue";

export default {
  components: { topNav, ButtonNav },
  name: "List",
  data() {
    return {
      titleList: "",
      activeid: this.$route.query.maitKey,
    };
  },
  mounted() {
    this.requestTitle();
  },
  methods: {
    //标题数据
    requestTitle() {
      queryTitle().then((res) => {
        // console.log(res);
        this.titleList = res.data.data.category.list;
        // console.log(this.titleList);
      });
    },
    headerTitle(maitKey) {
      this.activeid = maitKey;
      this.$router.push({ path: "/Listitem", query: { maitKey: maitKey } });
      console.log(this.$route.query.maitKey);
    },

  },

};
</script>

<style lang="scss" scoped>
.listnav {
  display: flex;
  //   height: calc(100vh - 60px);
  .left {
    width: 25%;
    background-color: #ccc;
    // height: calc(100vh - 60px);
    div {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
    }
  }
  .active {
    background-color: rgb(255, 255, 255) !important;
    color: pink;
  }
  .right {
    width: 75%;
  }
}
</style>